<template>
  <div class="list">
    <van-nav-bar
      :title="title"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="select">
      
      <el-input
        placeholder="报表天数"
        type="tel"
        v-model="value"
        clearable>
      </el-input>
      <van-button type="info" size="small" @click="checkChange">查询</van-button>
    </div>
    <el-table
      :data="tableData"
      border
      :cell-style="{'text-align':'center','padding':'0'}"
      :header-cell-style="getCellstyle"
      style="width: 100%">
      <el-table-column
        prop="tongjiDay"
        label="统计时间">
      </el-table-column>
      <el-table-column
      label="红包概况"
      >
        <el-table-column
          prop="totalPublishHongbao"
          label="发放个数">
        </el-table-column>
        <el-table-column
          prop="totalTakeHongbao"
          label="被领个数">
        </el-table-column>
        <el-table-column
          prop="totalTakeHongbaoMoney"
          label="被领金额">
        </el-table-column>
      </el-table-column>

      <el-table-column
      label="定时红包">
        <el-table-column
          prop="totalPublishHongbao1"
          label="总发红包数">
        </el-table-column>
        <el-table-column
          prop="totalTakeHongbao1"
          label="总抢红包用户数">
        </el-table-column>
        <el-table-column
          prop="totalTakeHongbaoMoney1"
          label="总抢红包金额">
        </el-table-column>
        <el-table-column
          prop="totalAvgTakeHongbaoMoney1"
          label="红包均值">
        </el-table-column>
      </el-table-column>

      <el-table-column
        label="转发红包">
        <el-table-column
          prop="totalPublishHongbao2"
          label="发放个数">
        </el-table-column>
        <el-table-column
          prop="totalTakeHongbao2"
          label="被领个数">
        </el-table-column>
        <el-table-column
          prop="totalTakeHongbaoMoney2"
          label="被领金额">
        </el-table-column>
        <el-table-column
          prop="totalAvgTakeHongbaoMoney2"
          label="红包均值">
        </el-table-column>
      </el-table-column>
      <el-table-column
        label="收徒红包">
        <el-table-column
          prop="totalPublishHongbao4"
          label="发放个数">
        </el-table-column>
        <el-table-column
          prop="totalTakeHongbao4"
          label="被领个数">
        </el-table-column>
        <el-table-column
          prop="totalTakeHongbaoMoney4"
          label="被领金额">
        </el-table-column>
        <el-table-column
          prop="totalAvgTakeHongbaoMoney4"
          label="红包均值">
        </el-table-column>
      </el-table-column>         
      
    </el-table>
    
  </div>
</template>

<script>
import { getCookie,setCookie } from "./until/index";
function init(){
  this.$toast.loading({
    message:'加载中...'
  })
  this.$ajax.get("rptMGetHongBaoYunYingShuju.ashx?uid="+getCookie("userid") +"&token=" +getCookie("token")+'&diffDay='+this.value)
      .then(res => {
        if (res.data.code === "200") {
          var data = res.data.data 
          this.tableData = data.reportList;
          this.$toast.clear()
        } else {

          this.$message.error(res.data.msg );
        }
      })
      .catch(error => {
        console.log(error);
      });
}
export default {
  data () {
    return {
      title:'红包运营数据',
      value:'',
      tableData:[]
    }
  },
  created () {
    if(!getCookie("userid") || !getCookie("token")){
      setCookie('token','',-1)
      setCookie('userid','',-1)
      window.location.href='/'
    }
    init.call(this)
  },
  methods: {
    onClickLeft(){
      this.$router.go(-1)
    },
    checkChange(){
      if(this.value > 30){
        this.$message.error('所填天数需小于30' );
        return
      }
      init.call(this)
    },
    getCellstyle({row, column, rowIndex, columnIndex}){
      if(row.length == 5){
        
        if(columnIndex == 0){
          
          return 'background:#fff;color:#444;text-align:center' 
        }
        if(columnIndex == 1){
          
          return 'background:#fff;color:#409eff;text-align:center' 
        }else if(columnIndex == 2){
          
          return 'background:#fff;color:#67c23a;text-align:center' 
        }else if(columnIndex == 3){
          
          return 'background:#fff;color:#e6a23c;text-align:center' 
        }else if(columnIndex == 4){
          
          return 'background:#fff;color:#f56c6c;text-align:center' 
        }
      }
      if(row.length == 15){
        
        if(columnIndex >= 0 &&  columnIndex < 3){
          
          return 'background:#fff;color:#409eff;text-align:center' 
        }else if(columnIndex >= 3 && columnIndex <7){
          return 'background:#fff;color:#67c23a;text-align:center' 
        }else if(columnIndex >= 7 && columnIndex <11){
          return 'background:#fff;color:#e6a23c;text-align:center' 
        }else if(columnIndex >= 11 && columnIndex <=15){
          return 'background:#fff;color:#f56c6c;text-align:center' 
        }
      }
    }
  }
}
</script>
<style scoped>
.select{margin: 10px;display: flex;justify-content: center;align-items: center;width: 400px}
.el-input{margin:0 5px}
</style>
  